<template>
	<view class="i-selectBody">
		<view class="selectItem" v-for="(item,index) in list" :key="index" @click.stop="checkItem(item)" :style="{borderBottom: border}">
			<view class="item_left">

				<image v-if="item.url" :src="item.url" mode=""></image>
				<text class="title">{{item.title}}</text>
			</view>
			<image v-if="item.active" src="../../static/images/checked_icon.png" mode=""></image>
			<image v-else src="../../static/images/unchecked_icon.png" mode=""></image>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		defineProps,
		defineEmits,
		watch
	} from 'vue'

	interface SelectItem {
		id : string | number,
		title : string,
		active : boolean,
		url?: string
	}
	const emit = defineEmits([
		'click'
	])
	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		} as any,
		check: {
			type: Object,
			default: () => {
				return {
					id: 0, num: 0,
				}
			}
		},
		border: {
			type: String,
			default: '1rpx solid #f3f4f5'
		}
	})
	const checkItem = (i : SelectItem) => {
		props.list.map((item : SelectItem) => {
			item.active = false
		})
		i.active = true
		emit('click', i)
	}

	const selectCheck = (id : string | number) => {
		props.list.map((item : SelectItem) => {
			if (id === item.id) {
				item.active = true
			} else {
				item.active = false
			}
		})
	}

	watch(() => props.check, (val) => {
		if (val && val.id) {
			selectCheck(val.id)
		}
	}, {
		// immediate: true,
	})
</script>

<style lang="scss" scoped>
	.i-selectBody {
		width: 100%;
		@include flexC;

		.selectItem {
			height: 88rpx;
			@include dfont;
			@include flexRS;
			width: calc(100% - 64rpx);
			margin: 0 auto;
			.item_left {
				@include flexR;
				image {
					width: 48rpx;
					height: 48rpx;
					border-radius: 48rpx;
					margin-right: 24rpx;
				}
			}

			image {
				width: 36rpx;
				height: 36rpx;
			}

		}

		.selectItem:active {
			background-color: rgba(255, 255, 255, 0.8);
		}

		// background-color: #fff;
	}
</style>